<template>
  <div class="app-container">
    <div class="console-action mb-5">
      <div>
        <el-button
          type="primary"
          size="small"
          @click="createProduct(null)"
        >添加商品</el-button>
        <div class="grid-content bg-purple" />
      </div>
      <div class="console-action__end">
        <el-button
          type="text"
          size="small"
          @click="advanceSearch=!advanceSearch"
        >高级搜索</el-button>
      </div>
    </div>
    <filter-data
      v-if="advanceSearch"
      class="mt-5"
      :config="filterConfig"
      @filter="filterSearch"
    />
    <el-tabs
      v-model="activeName"
      type="card"
      @tab-click="handleClick"
    >
      <el-tab-pane
        v-for="(tab,index) in tabs"
        :key="index"
        :label="tab.text"
        :name="tab.name"
      />
    </el-tabs>
    <grid-listview
      ref="gridView"
      :api-service="apiService"
      :bind-params="params"
      :grid-ref="configData.ref"
      :grid-config="configData.gridConfig"
      :grid-handles="configData.gridHandles"
      :grid-edit-width="200"
      :is-async="true"
      @action="onAction"
    />
  </div>
</template>

<script>
import { matchContentType } from '@/utils'
import { USER_CONFIG } from './config'
// import GridApiService from '@/api/grid'
import FilterData from './filter.vue'
import GridListview from '@/components/GridListview'
export default {
  name: 'UserList',
  components: {
    FilterData,
    GridListview
  },
  data() {
    return {
      tabs: [
        {
          text: '全部',
          name: 'all'
        },
        {
          text: '销售中',
          name: 'sale'
        },
        {
          text: '仓库中',
          name: 'default'
        },
        {
          text: '待审核',
          name: 'pending'
        },
        {
          text: '审核失败',
          name: 'auditfailure'
        },
        {
          text: '违规下架',
          name: 'against'
        }
      ],
      visible: false,
      activeName: 'all',
      testData: [],
      configData: USER_CONFIG,
      // apiService: new GridApiService('/shop/goods'),
      apiService: this.$http.commodity.list,
      dialogFormVisible: false,
      dialogTitle: '编辑用户授权策略',
      advanceSearch: true,
      listQuery: {},
      filterConfig: [
        {
          label: '商品名称：',
          placeholder: '输入商品名称',
          prop: 'keyword',
          type: 'text'
        },
        {
          label: '商品分类：',
          placeholder: '输入商品名称',
          prop: 'category',
          type: 'text'
        },
        {
          label: '销量：',
          placeholder: '输入商品名称',
          prop: 'sale',
          type: 'text'
        },
        {
          label: '商品类型：',
          placeholder: '输入商品名称',
          prop: 'type',
          type: 'text'
        },
        {
          label: '营销活动：',
          placeholder: '输入商品名称',
          prop: 'activity',
          type: 'text'
        }
      ]
    }
  },
  computed: {
    params() {
      return Object.assign(
        {
          type: this.activeName
        },
        this.listQuery
      )
    }
  },
  created() {
    // if (this.$router.query) {
    // }
    console.log('nextTick mounted:')
  },
  mounted() {
    // this.$nextTick(_ => {
    //   console.warn('nextTick mounted:', this.$route.query.type)
    // })
  },
  methods: {
    filterSearch(d) {
      this.listQuery = d
      console.log('ddd', d)
    },
    onShowTips() {
      this.$notify({
        title: '操作提示',
        message: '这是一条成功的提示消息',
        type: 'success'
      })
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    createProduct() {
      this.$router.push({
        path: '/commodity/default/create'
      })
    },
    toggleAdvanceSearch() {},
    onView(id) {
      this.$router.push({
        name: 'commodity/default/view/:id',
        params: {
          id: id
        }
      })
    },
    onUpdate(id) {
      this.$router.push({
        name: 'commodity/default/update/:id',
        params: {
          id: id
        }
      })
    },
    onDelete(id) {
      this.$confirm('确认要删除当前商品？')
        .then(_ => {
          this.delete(id)
        })
        .catch(_ => {})
    },
    delete(id) {
      console.log(id)
    },
    onAction(name, row) {
      if (name === 'view') {
        this.onView(row.id)
      } else if (name === 'update') {
        this.onUpdate(row.id)
      } else if (name === 'delete') {
        this.onDelete(row.id)
      }
      console.log('点击了下载按钮', name)
      console.log('点击了下载按钮', row)
    },
    onRefresh() {},
    onDownload() {
      const data = {
        filename: 'goods_list1-2021-08-24.csv'
      }
      this.$http.shop
        .download(data)
        .then(res => {
          this.handleSaveFile(res)
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    handleSaveFile(stream) {
      if (!stream) {
        return
      }
      const { headers, data } = stream
      const url = window.URL.createObjectURL(new Blob([data], matchContentType(headers)))
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', 'all_sample_fa_kegg_blast_bst.csv') // 指定下载后的文件名，防跳转
      document.body.appendChild(link)
      link.click()
    }
  }
}
</script>
<style lang="scss" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.console-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  &__end {
    display: flex;
    align-items: center;
  }
}
</style>
